<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { throttle } from '@/utils'
import SvgIcon from "./svg/SvgIcon.vue";
import SliderItem from "@/components/SliderItem.vue"

type item = {
	video_src:string,
	bg_color:string
}
export interface Props {
	index?: number
	labels?: string[],
	gap?: number,
	items:item[]

}

const props = withDefaults(defineProps<Props>(), {
	currentIndex: 0,
	gap: 30,
	items:<any>[]
})

const emit = defineEmits(['slid_down', 'slid_up'])

const currentIndex = ref(0)
watch(
	() => props.index, (newval, _oldval: any) => {
		currentIndex.value = newval
	}
)
const switchTab = throttle((i:number) => {
	if(  props.items.length - currentIndex.value < 2 && i > 0){
		return
	}
	if(currentIndex.value<=0 && i < 0){
		return 
	}
	currentIndex.value += i
	const item = item_ref.value
	item.style.transform = 'translate(0,-' + (item.offsetHeight + props.gap) * currentIndex.value + 'px)'
	// emit("slide");
},500 )
const slide = throttle(function (e: { deltaY: number; }) {
	if (e.deltaY > 0) {
		switchTab(1)
	} else if (e.deltaY < 0) {
		switchTab(-1)
	}
}, 1500)
const slider = ref()
const item_ref = ref()

// 上一个的状态
let prevComputed = computed(()=>{
	return currentIndex.value<=0
})
// 下一个的状态
let	nextComputed = computed(()=>{
	return props.items.length - currentIndex.value < 2
})

onMounted(() => {
	const scroll = slider.value
	scroll?.addEventListener('wheel', (e: any) => {
		e.preventDefault()
		slide(e)
	}, { capture: true })
});


</script>

<template>
	<div ref="slider" style="display: flex;flex-direction: row; ">

		<div style=" height: 100%;width: 100%; flex-grow: 1; position: relative;overflow: hidden; border-radius: 1rem;">
			<div ref="item_ref" style="width: 100%; height: 100%;transition: all .2s linear;">
				<SliderItem :items="items" :index="currentIndex" />
			</div>
			
		</div>
		<div class="switch-tab">
			<div class="switch-btns">
				<div @click="switchTab(-1)" class="switch_btn" :class="prevComputed?'disabled':''">
					<SvgIcon :iconSize="1.5" name="arrow-prev"  />
				</div>
				<div @click="switchTab(1)" class="switch_btn" :class="nextComputed?'disabled':''" >
					<SvgIcon :iconSize="1.5" name="arrow-next" />
				</div>
			</div>
		</div>

	</div>
</template>

<style scoped>
.switch-btns{display: flex;align-items: center; height: 88px; width: 44px;flex-direction: column; border-radius: 1rem; background-color: #f6f6f7;}
.switch-btns:hover{background-color: #f3f3f4;}
.switch_btn{width: 44px;height: 44px; display: flex; align-items: center; justify-content: center; color: #bfc0c3; cursor: pointer;}
.switch-btns .disabled{
	cursor:no-drop;
	color: #dfdfe0;
}
.switch-tab {
	width: 4.5rem;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

</style>
